<!--
 * @Description: 工单回复抽屉组件
-->
<template>
  <common-drawer
    :visible.sync="visible"
    :title="mode === 'reply' ? '工单回复' : '回复详情'"
    size="40%"
    :with-header="true"
    custom-class="workorder-reply-drawer"
    @close="handleCancel"
  >
    <template v-if="mode === 'reply'">
      <!-- <div class="drawer-content">
        <div class="drawer-row">
          <span class="drawer-label">工单主题：</span>
          <span class="drawer-value">{{
            workOrderData?.workOrderSubject || ""
          }}</span>
        </div>
        <div class="drawer-row">
          <span class="drawer-label">工单内容：</span>
          <span class="drawer-value">{{
            workOrderData?.workOrderContent || ""
          }}</span>
        </div>
        <div class="drawer-row align-top">
          <span class="drawer-label">工单回复：</span>
          <el-input
            type="textarea"
            v-model="replyContent"
            :rows="8"
            placeholder="请输入工单回复内容"
            class="reply-textarea"
          />
        </div>
        <div class="drawer-footer">
          <el-button @click="handleCancel">取消</el-button>
          <el-button type="primary" :loading="loading" @click="handleSubmit"
            >提交</el-button
          >
        </div>
      </div> -->

      <el-row class="reply-detail-content">
        <el-col :span="12" class="reply-detail-row">
          <span>工单来源：{{ workOrderData?.source || "-" }}</span>
        </el-col>
        <el-col :span="12" class="reply-detail-row">
          <span style="margin-left: 40px"
            >工单编号：{{ workOrderData?.workOrderNumber || "-" }}</span
          >
        </el-col>
        <el-col :span="24" class="reply-detail-row">
          <span>工单主题：{{ workOrderData?.workOrderSubject || "-" }}</span>
        </el-col>
        <el-col :span="12" class="reply-detail-row">
          <span>办理期限：{{ workOrderData?.createTime || "-" }}</span>
        </el-col>

        <el-col :span="12" class="reply-detail-row">
          <span style="margin-left: 40px"
            >签收期限：{{ workOrderData?.assignTime || "-" }}</span
          >
        </el-col>
        <el-col
          :span="24"
          class="reply-detail-row"
          style="margin-bottom: 24px; align-items: flex-start"
        >
          <span class="drawer-label">工单内容：</span>
          <el-input
            type="textarea"
            v-model="replyContent"
            :rows="8"
            placeholder="请输入工单回复内容"
            class="reply-textarea"
          />
        </el-col>

        <el-col class="drawer-footer">
          <el-button @click="handleCancel">取消</el-button>
          <el-button type="primary" :loading="loading" @click="handleSubmit"
            >提交</el-button
          >
        </el-col>
      </el-row>
    </template>
    <template v-else>
      <el-row class="reply-detail-content">
        <el-col :span="12" class="reply-detail-row">
          <span>工单来源：{{ workOrderData?.source || "-" }}</span>
        </el-col>
        <el-col :span="12" class="reply-detail-row">
          <span style="margin-left: 40px"
            >工单编号：{{ workOrderData?.workOrderNumber || "-" }}</span
          >
        </el-col>
        <el-col :span="24" class="reply-detail-row">
          <span>工单主题：{{ workOrderData?.workOrderSubject || "-" }}</span>
        </el-col>
        <el-col :span="12" class="reply-detail-row">
          <span>办理期限：{{ workOrderData?.createTime || "-" }}</span>
        </el-col>

        <el-col :span="12" class="reply-detail-row">
          <span style="margin-left: 40px"
            >签收期限：{{ workOrderData?.assignTime || "-" }}</span
          >
        </el-col>
        <el-col
          :span="24"
          class="reply-detail-row"
          style="margin-bottom: 24px; align-items: flex-start"
        >
          <span class="drawer-label">工单内容：</span>
          <span class="drawer-value" style="white-space: pre-line">{{
            workOrderData?.workOrderContent || "-"
          }}</span>
        </el-col>
        <el-col
          :span="24"
          v-for="item in replyList"
          :key="item.id"
          class="reply-detail-block"
        >
          <div
            class="reply-detail-block-title"
            style="display: flex; justify-content: space-between"
          >
            <span>{{ item.createBy || "-" }}</span>
            <span style="margin-left: 40px"
              >回复日期：{{ item.createTime || "-" }}</span
            >
          </div>
          <el-input
            type="textarea"
            :value="item.replyContent"
            :rows="4"
            readonly
            style="margin-top: 4px"
          />
        </el-col>
        <el-col class="drawer-footer">
          <el-button @click="handleCancel">关闭</el-button>
        </el-col>
      </el-row>
    </template>
  </common-drawer>
</template>

<script setup>
import { ref, watch } from "vue";
import CommonDrawer from "@/components/CommonDrawer.vue";
import { ElMessage } from "element-plus";

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  mode: {
    type: String,
    default: "reply",
    validator: (value) => ["reply", "view"].includes(value),
  },
  workOrderData: {
    type: Object,
    default: () => ({}),
  },
  replyList: {
    type: Array,
    default: () => [],
  },
});

const emit = defineEmits(["update:visible", "submit", "cancel"]);

const loading = ref(false);
const replyContent = ref("");

// Watch for workOrderData changes to update replyContent
watch(
  () => props.workOrderData,
  (newVal) => {
    if (newVal?.reply) {
      replyContent.value = newVal.reply;
    } else {
      replyContent.value = "";
    }
  },
  { immediate: true }
);

const handleSubmit = async () => {
  if (!replyContent.value) {
    ElMessage.error("回复内容不能为空");
    return;
  }
  loading.value = true;
  try {
    await emit("submit", replyContent.value);
    handleCancel();
  } finally {
    loading.value = false;
  }
};

const handleCancel = () => {
  emit("update:visible", false);
  emit("cancel");
  replyContent.value = "";
};
</script>

<style lang="scss" scoped>
.drawer-row {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
}

.drawer-row.align-top {
  align-items: flex-start;
}

.drawer-label {
  width: 80px;
  color: #222;
  flex-shrink: 0;
}

.drawer-value {
  color: #444;
  flex: 1;
  word-break: break-all;
}

.reply-textarea {
  width: 100%;
}

.drawer-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 32px;
  gap: 16px;
}

.reply-detail-row {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  font-size: 15px;
}

.reply-detail-block {
  margin-bottom: 18px;
}

.reply-detail-block-title {
  // font-weight: bold;
  margin-bottom: 4px;
}
</style>
